<template>
  <div>
    <div class="userLogin" v-if="!isUserLogin">
      <van-tabs v-model="active">
        <!-- <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab> -->
        <van-tab>
          <template #title> <van-icon name="friends-o" />登录</template>
          <Login @changeisUserLogin="changeisUserLogin"></Login>
        </van-tab>
        <van-tab>
          <template #title> <van-icon name="smile-o" />注册</template>
          <Regist @changeActive="changeActive" :userinfo="userinfo"></Regist>
        </van-tab>
      </van-tabs>
    </div>
    <div v-else>
      <UserInfo @changeisUserLogin="changeisUserLogin"></UserInfo>
    </div>
  </div>
</template>
<script>
import Login from "./components/login.vue";
import Regist from "./components/regist.vue";
import UserInfo from "./components/userInfo.vue";
import { getInfo } from "@service/UserService";
export default {
  data() {
    return {
      userinfo: "",
      active: 0,
      isUserLogin: false,
    };
  },
  components: { Login, Regist, UserInfo },
  methods: {
    changeActive(i) {
      this.active = i;
    },
    changeisUserLogin(val) {
      this.isUserLogin = val;
      this.getUserInfo();
    },
    async getUserInfo() {
      this.userinfo = await getInfo();
      console.log(this.userinfo);
    },
  },
  created() {
    const token = localStorage.getItem("token");
    if (token) {
      this.isUserLogin = true;
    } else {
      this.isUserLogin = false;
    }
  },
};
</script>
